<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
        <title>Add Show Wizard</title>
        <style>
            .ui-layout-unit-left .ui-layout-bd {
                border: 0;
            }
            .ui-layout-unit-center .ui-layout-bd {
                border: 0;
            }
        </style>
        <script type="text/javascript">
            //<![CDATA[
            var toggling = 'on';
            var obj;
            var name;
            var status;
            var costStatus;
            var cost = 0.00;
            var numTickets = 0;
            
            function select(id){
                alert(id);
            }
            
            function selection(id, c){
                var count = 0;
                while(document.images[count].title != id){
                    count++;
                }
                var image = document.images[count].src;
                name = image.substring(image.lastIndexOf("/") + 1);
                //seat = id.substring(id.lastIndexOf(":") + 1);
                if(name == "AvailableSeat.gif"){;
                    document.images[count].src = "picture/SelectedSeat.gif";
                    document.getElementById('status').innerHTML = 'Seat ' + id + ' selected';
                    cost += c;
                    numTicket = document.getElementById('numTicket').innerHTML;
                    numTicket++;
                    document.getElementById('numTicket').innerHTML = numTicket;
                    document.getElementById('seatsSelectedDisplay').innerHTML += id + ' ';
                    document.getElementById('purchaseForm:seatsSelected').value += id + ' ';
                }else if(name == "SelectedSeat.gif"){
                    document.images[count].src = "picture/AvailableSeat.gif";
                    cost -= c;
                    document.getElementById('status').innerHTML = 'Seat ' + id + ' deselected';
                    numTicket = document.getElementById('numTicket').innerHTML;
                    numTicket--;
                    document.getElementById('numTicket').innerHTML = numTicket;
                    var temp = document.getElementById('seatsSelectedDisplay').innerHTML;
                    temp = temp.substring(0, temp.indexOf(id)) + temp.substring(temp.indexOf(id) + id.length, temp.length);
                    document.getElementById('seatsSelectedDisplay').innerHTML = temp;
                    document.getElementById('purchaseForm:seatsSelected').value = temp;
                    numTickets--;
                }else if(name == "OccupiedSeat.gif"){
                    document.getElementById('status').innerHTML = 'Seat ' + id + ' is already occupied';
                    document.getElementById('numTicket').innerHTML += 0;
                }
                var tbl = document.getElementById('my_table');
                var numcols = tbl.rows[0].cells.length - 1;
                var numrows = tbl.rows.length - 1;
                var totalseats = numcols * numrows;
                var seats = 0;
                count = 5;
                while(count <= totalseats + 4){
                    if(document.images[count].src.substring(image.lastIndexOf("/") + 1) == "SelectedSeat.gif"){
                        seats++;
                    }
                    count++;
                }
                if(seats == 1 && cost != c){
                    cost = c;
                    document.getElementById('totalcostdisplay').innerHTML = 0;
                    document.getElementById('purchaseForm:totalcost').value = 0;
                    document.getElementById('seatsSelectedDisplay').innerHTML = id + ' ';
                    document.getElementById('purchaseForm:seatsSelected').value = id + ' ';
                }
                var currentCost = convert(cost);
                document.getElementById('totalcostdisplay').innerHTML = currentCost;
                document.getElementById('purchaseForm:totalcost').value = currentCost;
                
            }
            
            function convert(c){
                if((c * 100) % 100 == 0){
                    return c + ".00";
                }else if((c * 100) % 10 == 0){
                    return c + "0";
                }else{
                    return c;
                }
            }
            
            //]]>
        </script>
    </h:head>
    <h:body>
        <p:layout style="table-layout:auto; height:700px">
            <p:layoutUnit position="top" height="80" resizable="false" closable="false" collapsible="false">
                <h:panelGrid  style="background: goldenrod; width: 100%; height: 80px">
                    <h:outputText value="Foodsage"/>
                </h:panelGrid>
            </p:layoutUnit>
            <p:layoutUnit position="left" width="250">
                <h:panelGrid id="showInfo" style="background: goldenrod">
                    <p:panel header="Event Information" style="background: goldenrod">
                        <p:graphicImage  value="#{userPerformanceMB.infoPoster}" width="150" height="200"/>
                        <br/>
                        Language:
                        <h:outputText value="#{userPerformanceMB.infoLanguage}" />
                        <br/>
                        Duration:
                        <h:outputText value="#{userPerformanceMB.infoDuration} minutes" />
                        <br/>
                        Genre:
                        <h:outputText value="#{userPerformanceMB.infoGenre}" />
                        <br/>
                        Type:
                        <h:outputText value="#{userPerformanceMB.infoType}" />
                        <br/>
                        Rating:
                        <h:outputText value="#{userPerformanceMB.infoRating}" />
                        <br/>
                        <h:inputHidden value="#{userPerformanceMB.selectedEventId}" />
                    </p:panel>
                </h:panelGrid>
            </p:layoutUnit>
            <p:layoutUnit position="center" header="Book Show for #{userPerformanceMB.selectedEvent}" scrollable="true" style="background: goldenrod">
                <h:form id="purchaseForm">
                    <p:wizard widgetVar="buyWizard" flowListener="#{userPerformanceMB.onFlowProcess}">
                        <p:tab id="selectTiming" title="STEP #1: SELECT TIMESLOT">
                            <p:panel header="STEP #1: SELECT TIMESLOT AND VENUE">
                                <p:message for="selectShow"/>
                                <h:outputText value="Select Date, Time and Venue: " />
                                <h:selectOneMenu id="selectShow" style="width: 650px" value="#{userPerformanceMB.selectedSlot}" requiredMessage="A Slot is Required!" required="true">
                                    <f:selectItem itemLabel="Select One..." itemValue= ""/>
                                    <f:selectItems value="#{userPerformanceMB.getSpecificShows(userPerformanceMB.selectedEventId)}"></f:selectItems>
                                </h:selectOneMenu>
                                <hr/>
                                <p:commandButton immediate="true" id="cancellation1" value="Back to Mainpage" action="mainpage.xhtml?faces-redirect=true"/>
                            </p:panel>  
                        </p:tab>
                        <p:tab id="selectArea" title="STEP #2: SELECT AREA">
                            <p:panel header="STEP #2: CHOOSE AN AREA">
                                <p:message for="selectAreaName"/>
                                <h4>Selected Show Information</h4>
                                <h:outputText value="Venue: #{userPerformanceMB.buyShowVenues}"/>
                                <br/>
                                <h:outputText value="Date: #{userPerformanceMB.buyShowDate}"/>
                                <br/>
                                <h:outputText value="Time: #{userPerformanceMB.buyShowTime}"/>
                                <hr/>
                                <h:outputText value="Select Area: " />
                                <h:selectOneMenu id="selectAreaName" style="width: 650px" value="#{userPerformanceMB.selectedArea}" required="true">
                                    <f:selectItem itemLabel="Select One..." itemValue= ""/>
                                    <f:selectItems value="#{userPerformanceMB.buyShowAreasList}"></f:selectItems>
                                </h:selectOneMenu>
                                <hr/>
                                <h:outputText value="Floorplan:"/>
                                <br/>
                                <p:graphicImage value="#{userPerformanceMB.selectedShowLayout}" width="100%" height="700"/>
                                <hr/>
                                <p:commandButton immediate="true" id="cancellation2" value="Back to Mainpage" action="mainpage.xhtml?faces-redirect=true"/>
                            </p:panel> 
                        </p:tab>
                        <p:tab id="selectSeat" title="STEP #3: SELECT SEAT">
                            <p:panel style="width: 100%" header="STEP #3: SELECT SEAT (CHECK THAT THE SHOW DATE IS CORRECT)">
                                <h:messages errorClass="error"/>
                                <h2>You have selected: #{userPerformanceMB.selectedArea}</h2>
                                <hr/>
                                <h1>Select Seats: </h1>
                                <h:outputText value="Note: "/>
                                <h:graphicImage id="available" value="picture/AvailableSeat.gif"/>
                                <h:outputText value=" - available "/>
                                <h:graphicImage id="selected" value="picture/SelectedSeat.gif"/>
                                <h:outputText value=" - selected "/>
                                <h:graphicImage id="occupied" value="picture/OccupiedSeat.gif"/>
                                <h:outputText value=" - occupied "/>
                                <h:graphicImage id="empty" value="picture/EmptySpaceSeat.gif"/>
                                <h:outputText value=" - empty "/>
                                <hr/>
                                <table id="my_table">
                                    <tbody>
                                        <tr>
                                            <td>Row/Column</td>
                                            <ui:repeat var="columnLabel" value="#{userPerformanceMB.getAllColumns(userPerformanceMB.buyShowAreaId)}">
                                                <td align="center">#{columnLabel.toString()}</td>
                                            </ui:repeat>
                                        </tr>
                                    </tbody>
                                    <tbody>
                                        <ui:repeat var="rows" value="#{userPerformanceMB.getAllSeats(userPerformanceMB.buyShowAreaId)}">
                                            <tr>
                                                <td align="right">
                                                    #{rows.row}
                                                </td>
                                                <ui:repeat var="columns" value="#{rows.columns}">
                                                    <td>
                                                        <h:graphicImage id="a"  title="#{rows.row}#{columns.column}" value="#{columns.imagePath}" width = "20" height = "20" onclick="selection('#{rows.row}#{columns.column}', #{userPerformanceMB.cost})"/>
                                                    </td>
                                                </ui:repeat>
                                            </tr>
                                        </ui:repeat>
                                    </tbody>
                                </table>
                                <hr/>
                                <p><b id="status">choose</b></p>
                                <hr/>
                                <p><b>seats selected:</b></p>
                                <p><b id="seatsSelectedDisplay"></b></p>
                                <h:inputHidden id="seatsSelected" value="#{userPerformanceMB.buyShowTickets}" />
                                <hr/>
                                <table border="2">
                                    <tr>
                                        <td nowrap="nowrap" width="150">Number of Tickets</td>
                                        <td nowrap="nowrap" width="120" align="right"><b id="numTicket">0</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Total Cost (in S$)</td>
                                        <td align="right"><b id="totalcostdisplay">0.00</b></td>
                                        <h:inputHidden id="totalcost" value="#{userPerformanceMB.buyShowCost}" />
                                    </tr>
                                </table>
                                <hr/>

                            </p:panel>
                            <p:commandButton immediate="true" id="cancellation3" value="Back to Mainpage" action="mainpage.xhtml?faces-redirect=true"/>
                        </p:tab>
                        <p:tab id="confirmation" title="STEP #4: CONFIRMATION">
                            <p:panel header="STEP #4: CONFIRMATION PAGE">
                                <h:messages errorClass="error"/>
                                <h2>Summary:</h2>
                                <h:outputText value="Show Name: #{userPerformanceMB.selectedEvent}"/>
                                <br/>
                                <h:outputText value="Show Time: #{userPerformanceMB.buyShowDate} #{userPerformanceMB.buyShowTime}"/>
                                <br/>
                                <h:outputText value="Venue: #{userPerformanceMB.buyShowVenues} "/>
                                <br/>
                                <h:outputText value="Area Name: #{userPerformanceMB.buyShowArea} "/>
                                <br/>
                                <h:outputLabel value="Address: #{userPerformanceMB.buyShowAddress} " />
                                <br/>
                                <h:outputText value="Seat(s) Selected: #{userPerformanceMB.buyShowTickets}"/>
                                <br/>
                                <h:outputText value="Total Cost: $"/>
                                <h:outputText value="#{userPerformanceMB.buyShowCost}">
                                    <f:convertNumber pattern="0.00" currencySymbol="$" type="currency"/>
                                </h:outputText>
                                <br/>
                                <h:outputText style="font-style:italic" value="Please note that You have only 10 Minutes to complete the Transaction."/>
                                <br/>
                            </p:panel>
                            <hr/>
                            <p:commandButton immediate="true" id="cancellation4" value="Back to Mainpage" action="mainpage.xhtml?faces-redirect=true"/>
                        </p:tab>
                    </p:wizard>
                </h:form>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

